<template>
  <div>
    <!--  显示当前学生这一学年的学费，如果已经缴费就显示：当前学年学费已缴清，如果没有缴清就显示表格待操作-->
    <el-row>
      <el-col :span="1"><el-tag type="info">当前学年缴费情况:</el-tag></el-col>
        <el-col v-if="this.feeStatus==800" :span="7"><el-tag type="success">已缴清</el-tag></el-col>
        <el-col v-if="this.feeStatus==801" :span="7"><el-tag type="warning"><i class="el-icon-warning"></i> 未缴清</el-tag></el-col>
    </el-row>

    <div align="left" v-if="this.feeStatus==801" style="padding-top: 30px"><el-tag type="info">请缴纳当前学年学费:</el-tag></div>
    <div align="left" v-if="this.feeStatus==800" style="padding-top: 30px"><el-tag type="info">当前学年学费已缴清</el-tag></div>
    <!--  显示缴费表格-->
    <div style="padding-top: 30px">
      <div align="left"><i class="el-icon-menu"></i>学费类型：<el-tag style="font-size: larger">
        {{ feeType }}</el-tag></div>
      <div align="left"><i class="el-icon-tickets"></i>减免类型：<el-tag style="font-size: larger">{{ breakType }}</el-tag></div>
<!--      <el-table class="feeTable" :data="tableData" style="width: 100%">-->
<!--        <el-table-column prop="fee" label="费用条目\类型" width="180"></el-table-column>-->
<!--        <el-table-column v-for="(i,index) in sizes" :label="i" align="center">-->
<!--          <template v-slot="scope" >{{ scope.row[i] }}</template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
      <el-table
        :data="feeDetailVoList"
        stripe
        style="width: 100%">
        <el-table-column
          prop="type"
          label="费用条目\类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="origin"
          label="原费用"
          width="180">
        </el-table-column>
        <el-table-column
          prop="breakFee"
          label="减免">
        </el-table-column>
        <el-table-column
          prop="need"
          label="应缴">
        </el-table-column>
        <el-table-column
          prop="paid"
          label="已缴">
        </el-table-column>
        <el-table-column
          prop="left"
          label="剩余未缴">
        </el-table-column>
          <el-table-column
            v-if="this.feeStatus===801"
            label="缴纳金额">
            <template slot-scope="scope">
              <input
                v-if="scope.row.type!=='费用合计'"
                :data-a="scope.row.left"
                v-model.number="feePayList[scope.row.type]"
                @change="change"
                type="number"
              oninput="if(value>Number(event.target.dataset.a))value=Number(event.target.dataset.a);if(value<0)value=0"
                ></input>
              <div v-if="scope.row.type==='费用合计'" style="padding-top: 10px;" align="right" ><el-tag>合计：{{ totalInput }} 元</el-tag></div>
            </template>
          </el-table-column>
      </el-table>
      <div v-show="this.feeStatus===801">
        <div style="height: 25px"><el-button @click="payFee(feeId,totalInput,feePayList)" type="primary" plain>立即缴纳</el-button></div>
      </div>
    </div>
    <div align="left" style="padding-top: 30px" v-show="feeNotPayNum!==0"><el-tag type="warning"><i class="el-icon-warning"></i> 您还有其他待交费用，可到 缴费查询->未缴、未缴清费用查询 查看并缴纳</el-tag></div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "feePayment",
  data(){
    return{
      val:123,
      feeType:'',
      breakType:'',
      feeYear:'',
     feeStatus:'',
      total:'',
      feeId:'',//表示该条费用的id
      feeDetailVoList: [],
      feePayListOrigin:{},//和下面内容一样但固定
      feePayList:{},//表示提交缴费时，各项费用学生缴纳多少
      totalInput:0,
      feeNotPayNum:0,
    }
  },
  created() {
  },
  updated() {
  },
  mounted() {
    console.log("==========================")
    console.log(this.$parent.$parent.$parent.$parent.currentFeeId)
    this.feeId = this.$parent.$parent.$parent.$parent.currentFeeId
    this.getFeeDetail(this.feeId);
    this.getOtherFeeNotPaid();
  },
  methods:{
    getOtherFeeNotPaid(){
      axios.get(`/api/info/getOtherFeeNotPaid?studentId=${localStorage.getItem("studentId")}&feeId=${this.feeId}`).then((res)=>{
        this.feeNotPayNum = res.data.data.length
        console.log(res.data.data.length)
        console.log(res.data.data)
      }).catch((res)=>{
        console.log(res)
      })
    },
    change(){
      let total = 0;
      console.log(this.feePayList)
      for (var key in this.feePayList) {
        if( key !== '费用合计'){
          total +=this.feePayList[key];
        }
      }
      let totalKey = '费用合计'
      this.feePayList[totalKey] = total
      this.totalInput = total
    },
    payFee(feeId,money,feePayList){``
      console.log(feePayList)
      // axios.post(`/api/app/pay/beforePay?feeId=${feeId}&money=${money}`,{feePayList})
      //   .then((res)=>{
      //         console.log(res)
      //         window.location.href=res.data
      //       }).catch((res)=>{
      //         console.log(res)
      //       })
      axios.post(`/api/app/pay/tradePagePay?feeId=${feeId}&money=${money}`,{feePayList})
        .then((res)=>{
          console.log(res)
          document.write(res.data.formStr)
          // if(res.data.code === 0){
          //   window.location.href=res.data
          // }
        }).catch((res)=>{
        console.log(res)
      })
    },
    //
    getFeeDetail(feeId){
      axios.get(`/api/info/getFeeDetail?feeId=${feeId}`).then((res)=>{
        this.feeStatus = res.data.data.feeStatus
        this.feeType = res.data.data.feeType
        this.breakType = res.data.data.breakType
        this.total = res.data.data.total
        this.feeDetailVoList = res.data.data.feeDetailVoList
        let total = 0
        this.feeDetailVoList.forEach((item)=>{
          this.feePayList[item.type]=item.left
          if(item.type!=='费用合计'){
            total += item.left
          }
        })
        this.feePayListOrigin = this.feePayList
        this.totalInput = total
        console.log(this.feePayList)
      }).catch((res)=>{
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>
  .feeTable{
    width: 75%;
    background-color: #B3C0D1;
  }
</style>
